<template>
  <div class="login_body">
    <div>
      <input v-model="username" class="login_text" type="text" placeholder="账户名/手机号/Email" />
    </div>
    <div>
      <input v-model="password" class="login_text" type="password" placeholder="请输入您的密码" />
    </div>
      <div>
        <!-- 验证码直接通过src调用接口 修改的时候要src改变触发触发 所以加上随机数 有变化的时候才 -->
            <input type="text" class="login_text" v-model="verifyImg" placeHolder="请输入您的验证码"> <img @touchstart="handleToVerifyImg" src="/api2/users/verifyImg">
        </div>
    <div class="login_btn">
      <input type="submit" value="登录" @touchstart="handleToLogin" />
    </div>
    <div class="login_link">
      <router-link to="/mine/register" >立即注册</router-link>
      <router-link to="/mine/findPassword" >找回密码</router-link>
    </div>
  </div>
</template>

<script>
import { postloginlist } from "network/login/postlist";
import { messageBox } from "components/JS";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      verifyImg:""
    };
  },
  methods: {
    handleToLogin() {
      var data = { username: this.username, password: this.password, verifyImg : this.verifyImg };
      //点击登录发送axios请求
      this.postloginlist(data);
    },
    //登录验证
    postloginlist(data) {
      postloginlist(data).then((res) => {
        // 接口失效无法打印
        // var status = res.status;
        // var than = this
        // if (status === 0) {
        //   messageBox({
        //     title: "登录",
        //     content: "登录成功",
        //     ok: "确定",
        //     handleOk() {
        //       than.$router.push('/mine/center')
        //     }
        //   });
        // } else {
        //   messageBox({
        //     title: "登录",
        //     content: "登录失败",
        //     ok: "确定",
        //   });
        // }
      });
    },

    //验证码操作 直接拿到ev 事件对象 
    //点击的时候再次发送请求 就能更换验证码了 
    handleToVerifyImg(ev) {
      // 注意  这个src 要变才会有这个变化的发送新的请求的  如果说没有变的话 是不会发送请求的 所以通过一个 随机数或者日期 让其 请求地址发起个新的请求
      ev.target.src = '/api2/users/verifyImg?'+Math.random();
    }
  },
};
</script>

<style scoped>
</style>